
<script setup>
import { ref, defineEmits, onMounted } from "vue";
const emits = defineEmits(["listenPrintHtml"]);
const stringA = ref("");
const stringB = ref("");
const stringC = ref("");
stringB.value = ``;
const props = defineProps({
  homeInfo: {
    type: Object,
    default: {},
  },
});
const print = () => {
  if (stringA.value.length >= stringC.value.length) {
    emits("listenPrintHtml", true);
    // 退出递归
    return;
  } else {
    // stringA仍然比stringB短，进入下一次等待和递归
    setTimeout(() => {
      stringA.value += stringC.value.charAt(stringA.value.length);
      print(stringA, stringC);
    }, 50);
  }
};
onMounted(() => {
  // if(props.homeInfo) {
  //   console.log(props.homeInfo)
  //   state.stringB= props.homeInfo.welcomeSpeech.dataDes
  //   state.stringC= props.homeInfo.welcomeSpeech.dataValue
  //   print();

  // }
  var dateHours=new Date().getHours();
  if(dateHours >= 0 && dateHours <6){
    stringB.value="夜深了"
    stringC.value="夜深了，我是您的深夜守护者爱小问，24小时无微不至的智能伴侣。"
  }else if(dateHours >= 6 && dateHours < 12 ){
    stringB.value="上午好"
    stringC.value="爱小问愿您拥有美好的一天，有什么可以帮到您？"
  }else if(dateHours >= 12 && dateHours < 18 ){
    stringB.value="下午好"
    stringC.value="希望下午的时光充满效率与收获，有问题随时问我哦。"
  }else{
    stringB.value="晚上好"
    stringC.value="爱小问在这里守候，让我们共同面对每一个挑战。"
  }
  print();
  // setTimeout(() => {
  //   emits("listenPrintHtml", true);
  // }, 4000)
});
</script>

<template>
  <main>
    <div class="htmltext">
      <span class="move1">{{stringB}}</span>
      <!-- <span class="move1">哈喽，你好呀!</span> -->
      <p class="move2">{{stringA}}</p>
      <!-- <p  class="move3">今天有什么想跟我分享的吗?</p>
      <p class="move4">或者遇到了什么问题?</p>
      <p class="move5">或许我可以帮助你噢~</p> -->
    </div>
    <!-- <p class="text" v-html="stringA"></p> -->
  </main>
</template>

<style lang="scss" scoped>
*{
  font-size: 0px;
}
.text {
  font-size: 30px;
}
.htmltext{
  padding: 0 30px;
  & > span {
    font-size: 28px;
    // font-weight: 700;
    letter-spacing: 0px;
    color: #003a70;
    animation-fill-mode: forwards;
  }
  & > p {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 26px;
    color: rgba(0, 58, 112, 1);
    margin-top: 9px;
    display: block;
    margin-top: 6px;
    animation-fill-mode: forwards;
  }
}
.move1{
  // animation: moveP 1s;
}
.move2{
  // animation: movePr 1s;
  // animation-delay: 1s;
}
.move3{
  animation: moveP 1s;
  animation-delay: 2s;
}
.move4{
  animation: movePr 1s;
  animation-delay: 3s;
}
.move5{
  animation: moveP 1s;
  animation-delay: 4s;
}
@keyframes moveP {
  0% {
    opacity: 0;
    margin-left: 20px;
  }
  100% {
    opacity: 1;
    margin-left: 0;
  }
}
@keyframes movePr {
  0% {
    opacity: 0;
    margin-right: 20px;
  }
  100% {
    opacity: 1;
    margin-right: 0;
  }
}
</style>
